<!-- @format -->

<template>
  <div class="finds">
    <div class="search-title">
      <van-nav-bar left-arrow @click-left="onClickLeft">
        <template #title>
          <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            @search="onsearch"
          />
        </template>
        <template #left>
          <van-icon name="arrow-left" color="white" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="search-page">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="shopcard" v-for="(item, index) in newList" :key="index">
          <div class="shop-img" @click="goProduct(item.product.productSn)">
            <img :src="item.product.pic" alt="" />
          </div>
          <p class="shop-p">{{ item.product.description }}</p>
          <div class="shop-name">{{ item.product.detailTitle }}</div>
          <div class="shop-price">
            <div class="spl">￥{{ item.product.originalPrice }}</div>
            <div class="spr">
              <img
                src="https://m.flyco.com/aliyun/images/home/listCart.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getsearch } from "../../main";
export default {
  data() {
    return {
      value: "",
      listone: [],
      page1: 1,
      page1s: 1,
      loading: false,
      finished: false
    };
  },
  created() {
    this.pageone();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async pageone() {
      if (this.page1s > this.page1) {
        this.finished = true;
      }
      const res = await getsearch(this.page1s, "","");
      console.log(res);
      this.listone = [...this.listone, ...res.data.data.list];
      this.page1 = res.page1s;
      this.loading = false;
      this.page1s++;
    },
    onLoad() {
      this.pageone();
    },
    onsearch() {
      console.log(this.value);
    },
    goProduct(id){
      if(id){
        this.$router.push({
          name: "Products",
          query: {
            productSn:id
          }
        });
      }
      
    }
  },
  computed:{
    newList(){
      return this.listone.filter(item=>(item.product.detailTitle.indexOf(this.value))>-1)
    }
  }
};
</script>

<style>
#format {
  padding: 0;
  margin: 0;
}
.van-nav-bar__content {
  background-image: linear-gradient(270deg, #11eff7, #2aa8f0),
    linear-gradient(#fff, #fff);
}
.van-search {
  padding: 0;
}
.search-page {
  padding: 0 0.266667rem;
  background: rgb(240, 239, 239);
}
.van-tabs__nav--line {
  margin: 0.133333rem 0.266667rem;
}
.van-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.shopcard {
  width: 48.9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  margin: 0.2rem 0.05rem;
}
.shop-img {
  width: 95%;
}
.shop-p {
  width: 4.48rem;
  height: 0.653rem;
  font-size: 0.283rem;
  color: #fff;
  line-height: 0.653rem;
  text-align: center;
  padding: 0 0.03rem;
  margin: 0;
  background: linear-gradient(rgb(209, 184, 116) 0%, rgb(222, 197, 131) 100%);
}
.shop-name {
  margin: 0.233rem 0.174rem 0.233rem 0.147rem;
  font-size: 0.283rem;
  text-align: center;
  padding-bottom: 0.3rem;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shop-price {
  display: flex;
  justify-content: space-between;
  padding: 0 0.133rem;
  height: 0.8rem;
  width: 100%;
}
.spl {
  font-size: 0.428rem;
  color: #de3e26;
  width: 1.1rem;
}
.spr {
  width: 0.667rem;
  height: 0.667rem;
  position: relative;
}
.spr img {
  position: absolute;
  top: 0;
}
</style>
